<template>
    <div class="box-column container-grid">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
                <template v-slot:facethumb="{ row }">
                    <el-image style="width: 70px; height: 40px" :src="row.face_thumb" fit="contain" v-if="row.face_thumb !== ''" :preview-src-list="[row.face_thumb]" ></el-image>
                </template>
                <template v-slot:pwd="{ row }">
                        <template v-if="row.door_pwd !==''">
                        {{ row.door_pwd }}
                    </template>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <RenewForm ref="RenewForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></RenewForm>
        <userForm ref="userForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></userForm>
        <userManage ref="userManage" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></userManage>
    </div>
</template>
<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter, State } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import moment from 'moment';
import RenewForm from './Renew.vue';
import userForm from './User.vue';
import userManage from './Manage.vue';

@Component({
    name: 'equipmentCardTable',
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        RenewForm,
        userForm,
        userManage
    }
})
export default class equipmentCardTable extends Vue {
    @Action('parkTenantCard/del') itemDel: any;
    @Action('equipmentCard/list') getList: any;
    @Getter('sharing/cardType') typeData: any;
    @State((state) => state.sharing.cardCategories) categoriesData: any;
    @State((state) => state.sharing.func) funcData: any;

    @Action('equipmentDoorGroup/all') getGroup: any;
    @Action("purviewDepartment/tree") getDepartment: any;
    mounted() {
        this.getGroup();
        this.getDepartment();
    }

    deleteDialog: any = {
        name: '确定注销吗？',
        comfirm: '注销'
    };
    table: any = {
        btns: [
            {
                label: '续期',
                condition: ['permissionsData.renewal'],
                enabledCondition: [
                    function ({ row }) {
                        return row.status == 1;
                    }],
                param: 'RenewForm',
                handleClick: (this as any).onEditClick
            },
            {
                label: '注销',
                condition: ['permissionsData.del'],
                handleClick: (this as any).onDelClick
            },
            {
                label: "授权门禁",
                condition: [
                    "permissionsData.scripAuthDoorTable"
                ],
                handleClick: this.onAuthDoorClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                width: 100,
                title: '用户类型',
                field: 'member_type',
                params: 'categoriesData',
                formatter: (this as any).formatterData
            },
            {
                width: 100,
                title: '人员编号',
                field: 'job_number'
            },
            {
                width: 120,
                title: '姓名',
                field: 'member_xm'
            },
            {
                width: 100,
                title: '是否考勤',
                field: 'is_kq',
                formatter: function ({ cellValue }) {
                    return cellValue == 1 ? '是' : '否';
                }
            },
            {
                width: 120,
                title: '手机号',
                field: 'phone'
            },
            {
                width: 80,
                title: '二维码',
                field: 'door_qrcode',
                params: 'funcData',
                formatter: (this as any).formatterData,
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.door_qrcode];
                }
            },
            {
                width: 100,
                title: '卡号',
                field: 'door_card'
            },
            {
                max: 150,
               // slots: { default: 'pwd' },
                title: '密码',
                field: 'door_pwd'
            },
            {
                slots: { default: 'facethumb' },
                width: 80,
                title: '人脸',
                field: 'face_thumb'
            },
            {
                width: 100,
                title: '授权门禁数',
                field: 'door_count'
            },
            {
                width: 150,
                title: '失效时间',
                field: 'end_time'
            },
            {
                width: 150,
                title: '开卡时间',
                field: 'created_at'
            },
            {
                showOverflow: 'ellipsis',
                fixed: 'right',
                slots: { default: 'operate' },
                title: '操作',
                width: 180
            }
        ]
    };

    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            dataName: 'categoriesData',
            keyName: 'member_type'
        }
    ];

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'scrip_xm',
                label: '持有人'
            },
            {
                field: 'door_card',
                label: '门禁卡号'
            },
            {
                label: '用户类型',
                fieldType: 'select',
                field: 'member_type'
            },
            {
                fieldType: 'daterange',
                field: 'time',
                label: '日期范围',
                type: 'daterange',
                format: 'yyyy-MM-dd',
                pickerOptions: {
                    disabledDate: (time: any) => {
                        const date = time.getTime();
                        return !(
                            date < moment().subtract(0, 'day') &&
                            date > moment().subtract(+12, 'months')
                        );
                    }
                }
            }
        ],
        valueTransform: [
            {
                field: 'time',
                fields: ['create_start_time', 'create_end_time']
            }
        ],
        btns: [
            {
                label: '授权',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: ['permissionsData.addUser'],
                handleClick: (this as any).onAddUserClick
            },
            {
                label: '员工授权',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: ['permissionsData.addManage'],
                handleClick: (this as any).onAddManageClick
            }
        ]
    };
    onAddUserClick() {
        const me = this as any;
        me.showWin(false, {}, 'userForm');
    }

    onAddManageClick() {
        const me = this as any;
        me.showWin(false, {}, 'userManage');
    }
    onAuthDoorClick({ row }) {
        row.from = 2;
        row.door_end_time = row.end_time;
        (this as any).go("scripAuthDoorTable", {
            id: row.scrip_sn,
            isEdit: true,
            data: row
        }, { isBase: true });
    }
}
</script>
